<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box{
      width: 300px;
      height: 300px;
      background-color: aquamarine;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <!-- 高频率触发事件才需要节流,事件发生一次,回调函数就执行一次 -->
  <script>
    const oBox=document.getElementById('box')

    // 每一次事件发生都会调用一次回调函数 ,事件回调函数是不重复的,但是单独的
    // 获取onmousemove事件的间隔时间(这一次事件时间-上一次事件时间,两个事件函数是不能互相拿变量,每一次事件发生都会调用一次函数,调用的函数都是各自单独的,里面的变量都是局部变量)
    // let lastTime=0//设置初始值为0  上一次事件回调函数时间是局部变量,在这次的事件回调函数中是拿不到值的  设置为全局
    // oBox.onmousemove=function(){
    //   const nowTime=Date.now()// 当前的时间戳

    //   console.log(nowTime-lastTime);

    //   //每一次事件完成给上一次时间事件重新赋值,在重新开始新的事件回调函数事件时就是减去上一次事件回调函数完成的时间了
    //   lastTime=nowTime
    //   // 不重新赋值,上一次事件回调时间就永远为0是初始值,那每次执行事件时打印的间隔时间就是当前的时间戳
    
    // }


    // 基础节流(事件的触发频率和事件函数的触发频率是不能修改的,我们节流只能从事件函数的核心代码执行频率下手)
    // let lastTime=0//设置第一次的初始值为0
    // oBox.onmousemove=function(){
    //   const nowTime=Date.now()
    //   // 看门狗
    //   if(nowTime-lastTime<100){
    //     return
    //   }

    //   // 执行完第一次后给上次事件重新赋值现在的时间,方便下次进来的回调事件计算时间
    //   lastTime=nowTime

    //   // 核心代码
    //   console.log("核心代码")
 
    // }


    // 封装节流函数,供需要节流的高频事件都能使用
    // 第一个参数是核心代码   第二个参数是事件发生的间隔时间
    function throttle(fn,time){
      let lastTime=0
      // 返回的函数才是真正的事件回调函数
      return function(e){
        const nowTime=Date.now()

         // 看门狗
        if(nowTime-lastTime<time){
          return
        }

        // 事件完成时  lastTime重新赋值
        lastTime=nowTime;
        // 调用核心代码
        // fn ()
        // 调用核心代码,修改this,拿到e   在真正的时间回调函数中this 和 e  是正确的
        fn.call(this,e)
      }

    }

    //核心代码
    function cneter(e){
      console.log('我是核心代码呀');
      console.log('e',e);
      console.log('this',this);

    };


    // throttle函数需要接收参数,有形参,就需要实参传进来,加了()传参之后就直接调用了,onmousemove事件就没有回调函数了  所以throttle的返回值就需要是一个函数
    // 这里如果还是直接用核心函数的就没有节流了还是动一下执行回调函数
    oBox.onmousemove=throttle(cneter,100)


  </script>
</body>
</html>